整個 Vue 應用程式的管理者，負責配置和運行環境的內容。
(待更新)
傳入 createApp()的{}物件，為最頂層元件。
被根元件包含的內容
以下範例的A、B、C、D區域，是 Vue 的核心基礎結構，幾乎每個 Vue 應用都會看到，但會有一些變化:
kartg0052598
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 3 基礎範例</title>
</head>
<body>
<!-- A -->
<div id="app">
<p>{{ message }}</p>
</div>
<!-- 引入 Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// B
const app = Vue.createApp({
// C
data() {
return {
message: '哈囉,這是安裝好的 Vue 環境!'
};
}
});
// D
app.mount('#app');
</script>
</body>
</html>
Vue 物件Vue.createApp() 建立 Vue 應用實例data() 函式,回傳資料物件app.mount('#app') 掛載到 DOM{{ message }} 替換成實際值並顯示在畫面上{{ message }} — 雙大括號 (Mustache Syntax)這是什麼?
{{ }})它的作用:
message 值」<p>{{ message }}</p>,會去尋找對應的資料message 是 '你好',最終顯示在網頁上的就是 <p>你好</p>
重要特性:
message 的值改變時,畫面會自動更新const app = Vue.createApp({ ... }) — Vue 應用實例app 變數是什麼?
app 是一個「Vue 應用實例」,可以想像成一個獨立運作的「Vue 小宇宙」它的作用:
Vue
Vue.createApp() 建立一個全新的 Vue 應用程式app 變數代表了所有 Vue 邏輯、資料和功能的集合data() { return { message: ... } } — 資料的家這是什麼?
message 就是我們定義的一個屬性,可以在模板(A 區)中使用data函式是什麼?
data() 必須是一個函式,並且要 return 一個物件。實際運作:
data() {
return {
message: '哈囉,這是安裝好的 Vue 環境!',
count: 0,
isVisible: true
// 可以定義更多資料...
};
}
app.mount('#app') — 啟動這是什麼?
它的作用:
app 小宇宙,啟動並接管 HTML 中 ID 為 app 的 <div>」<div id="app"> ... </div> 內部的一切都由 Vue 控制重要:
#app 是 CSS 選擇器語法,代表 id="app" 的元素| 位置 | | 內容 | | 作用 |
|------|------|------|
| A | {{ message }} | 模板語法,顯示資料 |
| B | Vue.createApp() | 建立 Vue 應用實例 |
| C | data() | 定義響應式資料 |
| D | app.mount() | 將 Vue 掛載到 DOM |
沒錯，如果想啟動一個完整的Vue應用程式，這是唯一的標準方法。
Vue是一種框架提供的應用程式初始化API。框架需要一個統一、明確的入口點來設置其所有底層機制。
你可能會有個疑問，為何vu3版本的，創建一個新實例的語法是Vue.createApp({})，而不是跟js一樣是用new Vue({})？
因為其實在Vue 2的版本，定義一個根應用實例就是這樣寫new Vue({ ... })。而Vue 3是這樣寫Vue.createApp(App)。那為何要改成這樣呢？因為前者每次new Vue()都會繼承和污染全域的 Vue 配置。
而後者每個createApp() 實例都是獨立隔離的。
也就是說，new Vue({ ... })所有的配置和插件都是透過對 Vue 這個全域建構子，進行操作。
而Vue.createApp({})，則是對Vue內的某個實例做操作，而不是Vue的全域。
範例：這邊用兩個js的函式庫名詞作範例，Vue Router、Vue Analytics。先不用了解這兩個是什麼，在這邊帶到這兩個，單純就是個範例。
Vue2
安裝Router，使用Vue.use(VueRouter)語法。安裝Analytics，使用Vue.use(AnalyticsPlugin)語法。
Vue3
安裝Router，使用appA.use(VueRouter)語法。安裝Analytics，使用appB.use(AnalyticsPlugin)語法。
vue2因為語法的設計關係，沒辦法指定要安裝到哪個實例去。所以會安裝到Vue全域，假設你的Vue有兩個或兩個以上的實例，每個實例都會被安裝到Router、Analytics。
vue3的語法則沒有這限制，能指定要安裝到哪個實例去。appA只有VueRouter有，appB只有Analytics有。
兩實例可以個別使用不同的函式庫，且可以指定某個實例安裝要安裝哪個。每個實例中，安裝互不影響。
iThome鐵人賽
看影片追技術